{% layout="base.html" %}
{-main_header-}
{-main_header-}

{-main-}
<h1 class="header"> {{_("System Settings")}} </h1>

<table class="ui celled basic table">
	<thead>
		<tr>
			<th>{{_("Setting")}}</th>
			<th>{{_("Value")}}</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>
				{{_("Application Center Host")}}
			</td>
			<td>
				<div class="ui action input">
					{% if not edit_enable then %}
					<input id="pkg_host_url" value="{{pkg_host}}" type="text" readonly="true">
					{% else %}
					<input id="pkg_host_url" value="{{pkg_host}}" type="text">
					<button id="pkg_host_url_btn" class="ui yellow right labeled icon button">
						<i class="check icon"></i>
						{{_("Change")}}
					</button>
					{% end %}
				</div>
			</td>
		</tr>
		<tr>
			<td>
				{{_("Application Conf Center Host")}}
			</td>
			<td>
				<div class="ui action input">
					{% if not edit_enable then %}
					<input id="cnf_host_url" value="{{cnf_host}}" type="text" readonly="true">
					{% else %}
					<input id="cnf_host_url" value="{{pkg_host}}" type="text">
					<button id="cnf_host_url_btn" class="ui yellow right labeled icon button">
						<i class="check icon"></i>
						{{_("Change")}}
					</button>
					{% end %}
				</div>
			</td>
		</tr>
		<tr>
			<td>
				{{_("Enable Configuration Upload")}}
			</td>
			<td>
				{% if cfg_upload then %}
				<div class="ui toggle checked checkbox" id="cfg_upload">
					<input class="hidden" type="checkbox" checked="true">
					<label></label>
				</div>
				{% else %}
				<div class="ui toggle checkbox" id="cfg_upload">
					<input class="hidden" type="checkbox">
					<label></label>
				</div>
				{% end %}
			</td>
		</tr>
		<tr>
			<td>
				{{_("Using Beta")}}
			</td>
			<td>
				{% if using_beta then %}
				<div class="ui toggle checked checkbox" id="using_beta">
					<input class="hidden" type="checkbox" checked="true">
					<label></label>
				</div>
				{% else %}
				<div class="ui toggle checkbox" id="using_beta">
					<input class="hidden" type="checkbox">
					<label></label>
				</div>
				{% end %}
			</td>
		</tr>
	</tbody>
</table>

<div class="ui longer using_beta modal scrolling transition hidden">
	<div class="ui header">{{_("Warning")}}</div>
	<div class="scrolling content">
		<h2 class="ui center aligned icon header">
			<i class="yellow warning sign icon"></i>
			{{_("Beta Usage Warning")}}
		</h2>
		<div class="ui center aligned header"></div>
		{*_([[
		<p>Using beta application/system may injure your hardware. </p>
		<p>And enable using beta will lose your hardware guarantee. </p>
		<p>You need to enable using beta from cloud first! </p>
		]])*}
	</div>
	<div class="actions">
		<div class="ui ok orange button">I Agree!</div>
		<div class="ui cancel button">Cancel</div>
	</div>
</div>

<div class="ui basic msg_print form">
	<div class="ui success message"></div>
	<div class="ui error message"></div>
</div>

{-main-}

{-script-}
<script>
var msg_form = null;
function reset_message() {
	msg_form.removeClass('success').removeClass('error');
};
function print_err_message(msg) {
	reset_message();
	console.log('Exception:' + msg);
	msg_form.find('.ui.error.message').html(msg);
	msg_form.addClass('error');
};
function print_message(msg) {
	reset_message();
	console.log('OK:' + msg);
	msg_form.find('.ui.success.message').html(msg);
	msg_form.addClass('success');
};
function refresh_page() {
	window.location.replace("/settings");
};
function uncheck_using_beta() {
	$('#using_beta').checkbox('uncheck');
};
function uncheck_cfg_upload() {
	$('#cfg_upload').checkbox('uncheck');
};
function settings_option(option, value) {
	$.post("/settings", {from_web:true, action:'pkg', option:option, value:value}, function(data) {
		print_message(data);
	})
	.done(function() {
		setTimeout(refresh_page, 500);
	})
	.fail(function() {
		print_err_message('{{_("Failed to send request")}}');
		setTimeout(refresh_page, 500);
	});
};
$(document).ready(function(){
	msg_form = $('.ui.msg_print.form');
	$("#pkg_host_url_btn").click(function() {
		var value = $('#pkg_host_url').val();
		settings_option('pkg_host_url', value);
	});
	$("#cnf_host_url_btn").click(function() {
		var value = $('#cnf_host_url').val();
		settings_option('cnf_host_url', value);
	});
	var using_beta = {{ using_beta and "true" or "false" }};
	$('#using_beta')
		.checkbox({
			// check all children
			onChecked: function() {
				$('.ui.longer.using_beta.modal')
					.modal({
						closable  : false,
						onDeny    : function(){
							setTimeout(uncheck_using_beta, 500);
						},
						onApprove : function() {
							settings_option('using_beta', true);
						}
					})
					.modal('show')
				;
			},
			// uncheck all children
			onUnchecked: function() {
				if (using_beta) {
					settings_option('using_beta', false);
				}
			}
		})
	;
	var cfg_upload = {{ cfg_upload and "true" or "false" }};
	$('#cfg_upload')
		.checkbox({
			// check all children
			onChecked: function() {
				if (!cfg_upload) {
					settings_option('cfg_auto_upload', true);
					cfg_upload = true;
				}
			},
			// uncheck all children
			onUnchecked: function() {
				if (cfg_upload) {
					settings_option('cfg_auto_upload', false);
					cfg_upload = false;
				}
			}
		})
	;
});
</script>
{-script-}
